<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <style>
        .goods-manage {
          width: 80%;
          margin: 20px auto;
        }
        .good-No {
            width: 40px;
          color: #333333;
          font-weight: bold;
        }
        .goods-table .button {
          text-align: center;
          width: 80px;
        }
    </style>
</head>
<body>
    <div class="goods-manage">
        <button type="button" class="btn btn-primary">全选</button>
        <button type="button" class="btn btn-danger">删除</button>        
        <table class="table table-bordered table-hover goods-table">
            <caption>商品管理</caption>
            <thead>
                <tr>
                    <th style="width:40px;"><input type="checkbox"/></th>
                    <th class="good-No">#</th>
                    <th>商品名</th>
                    <th>开始时间</th>
                    <th>过期时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="tBody">
            </tbody>
        </table>
    </div>
    <script>
        function formatDate (timestamp) {
            var date = new Date(timestamp)
            var year = date.getFullYear()
            var month = date.getMonth() + 1
            var day = date.getDate()
            return year + '年' + month + '月' + day + '日'
        }


        $(function () {
            $.get('/rest/goods', function (res) {
                var data = res['_embedded']
                var goodses = data.goodses
                var trs = []
                goodses.forEach(function (item, index) {
                    var i = index + 1
                    var startTime = formatDate(item.startTime)
                    var endTime = formatDate(item.endTime)
                    var tr = '<tr>' +
                        '<td><input type="checkbox"/></td>' +
                        '<td class="good-No">' + i + '</td> ' +
                        '<td>' + item.name + '</td> ' +
                        '<td>' + startTime + '</td> ' +
                        '<td>' + endTime + '</td> ' +
                        '<td class="button"> ' +
                            '<button type="button" class="btn btn-danger btn-xs" data-index="' + index + '">删除</button> ' +
                        '</td> ' +
                        '</tr>'
                    trs.push(tr)
                })
                $('#tBody').html(trs.join(''))

                // 自适应高度
                var main = $(window.parent.document).find("#main-iframe")
                var thisheight = $(document).height()
                main.height(thisheight)

                $('.button button').on('click', function () {
                    var index = $(this).data('index')
                    var goodsId =  goodses[index].goodsId
                    var url = '/delete/good/' + goodsId
                    $.ajax({
                        type: 'delete',
                        url: url,
                        success: function (data) {
                            console.log(data)
                            if (data === flase){
                                alert("删除失败，请重试")
                            }else{
                                window.location.reload(true)
                            }

                        },
                        error: function () {

                        }
                    })
                })
            })
        })
    </script>
</body>
</html>